<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>

</head>
<body>
<div id="app">
<!--  3  使用组件-->
    <my-module-1></my-module-1>
    <my-module-2></my-module-2>
</div>
<script src="../../js/common/vue/vue.js"></script>
<script>

    /*组件使用步骤
    * 1 创建组件构造器
    * 2 注入组件
    * 3 使用组件
    * */
    //1创建组件构造器 es6语法 ·· 符号包裹的字符串换行也不用用加号连接。
    const cpnC = Vue.extend({
        template:`<h2>123</h2>`
    });
    //2注册组件 语法 组件名 组件构造器名，
    // 组件名命名规范 全小写，单词用-隔开 最少保留一个 - 符号，避免与 html 标签重名。
    // 注意：组件必须是在vue挂载标签内使用才有效。
    Vue.component('my-module-1',cpnC);
    //方式二 最好外面要包裹一个div,如果标签存在平级多个会报错，并且只会渲染第一个标签的内容。
    Vue.component('my-module-2',{
        template:`<div>
                    <h2>我是一个组件</h2>
                    <h2>楼上CNB</h2>
                    </div>
                    `
    });
    const app = new Vue({el:'#app'})
</script>
</body>
</html>